<template>
  <div class="recomLists">
    <div class="content">
      <ul>
        <li v-for="item in Playlist" :key="item.id">
          <div class="img">
            <img :src="item.coverImgUrl" alt="" />
          </div>
          <div class="shul">
            <span
              ><i class="iconfont icon-bofang"></i
              >{{ item.playCount | formatNum }}</span
            >
          </div>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ["Playlist"],
  //播放量转换单位
  filters: {
    formatNum(value) {
      let w = value > 10000 ? value / 10000 : value; //万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="scss" scoped>
.recomLists {
  margin-top: 10px;
  padding: 0 5px;
  .content {
    ul {
      display: flex;
      flex-wrap: wrap;

      li {
        flex: 0 0 33.33%;
        position: relative;

        .shul {
          position: absolute;
          top: 0px;
          right: 0px;
          color: #fff;
          font-size: 10px;
          height: 20px;
          line-height: 20px;
          background-color: rgba(0, 0, 0, 0.2);
          border-radius: 20px;
          margin-right: 10px;
          margin-top: 5px;
          border-radius: 37.5%/100%;
          padding: 0 5px;
          i {
            display: inline-block;
            transform: scale(0.9);
            vertical-align: middle;
            margin-top: -3px;
          }
        }

        .img {
          border-radius: 3px;
          margin: 0px 4px;

          img {
            width: 100%;
            border-radius: 10px;
          }
        }

        p {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          padding: 6px 2px 0px 6px;
          min-height: 30px;
          line-height: 1.2;
          font-size: 13px;
          color: #464749;
          margin-bottom: 8px;
        }
      }
    }
  }
}
</style>